<template>
        <div class="propertyWrap">
                <el-form :inline="true" :model="params" class="demo-form-inline">
                        <div>
                                <el-form-item label="订单名称：">
        				<el-input v-model="params.orderName" placeholder="请输入订单名称"></el-input>
        			</el-form-item>
                                <el-form-item label="订单号：">
                                        <el-input v-model="params.orderNum" placeholder="请输入订单号"></el-input>
                                </el-form-item>
                                <el-form-item>
                                        <el-button type="primary" id="monitorEnter">查询</el-button>
                                        <el-button type="primary">导出</el-button>
                                </el-form-item>
                        </div>
                        <div>
                                <el-form-item label="业主姓名：">
                                    <el-input v-model="params.ownerName" placeholder="请输入业主姓名"></el-input>
                                </el-form-item>
                                <el-form-item label="房间编号：">
                                    <el-input v-model="params.houseNum" placeholder="请输入房间编号"></el-input>
                                </el-form-item>
                                <el-form-item label="房源状态：">
                                    <el-select v-model="params.houseState" >
                                            <el-option v-for="item in houseStates"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.value"
                                            >
                                            </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary">确定</el-button>
                                    <el-button type="primary">批量通知</el-button>
                                </el-form-item>
                        </div>
                </el-form>
                <div class="tab">
                        <el-table :data="tableData" border stripe v-loading="tableLoading">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column label="房屋编号" prop="houseNum" align="center"></el-table-column>
                                <el-table-column label="所属开发商" prop="ownedDeveloper" align="center"></el-table-column>
                                <el-table-column label="产权公司" prop="propertyCompany" align="center"></el-table-column>
                                <el-table-column label="房源状态" prop="houseState" align="center" :formatter="initState"></el-table-column>
                                <el-table-column label="当前节点" prop="currentNode" align="center"></el-table-column>
                                <el-table-column label="节点负责人" prop="nodeCharge" align="center"></el-table-column>
                                <el-table-column label="办理进度" prop="progress" align="center"></el-table-column>
                                <el-table-column label="订单详情"  align="center">
                                        <template slot-scope="scope">
                                                <el-button type="text" size="small" @click="look">查看</el-button>
                                        </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                                <el-button type="text" size="small" @click="abnormal(scope.row)">置为异常</el-button>
                                        </template>
                                </el-table-column>
                        </el-table>
                        <el-pagination
            		            @size-change="handleSizeChange"
            		            @current-change="handleCurrentChange"
            		            :current-page="params.pageNum"
            		            :page-sizes="[10, 20, 40, 50]"
            		            :page-size="params.pageSize"
            		            layout="total, sizes, prev, pager, next, jumper"
            		            :total="total" style="margin-top:30px;">
            		 </el-pagination>
                </div>
                <el-dialog title="" :visible.sync="dialogTableVisible" width="25%" style="text-align:center;">
                        <div class="dialogDiv">
                            <label>房屋编号：</label>
                            <span>{{houseStateData.houseNum}}</span>
                        </div>
                        <div class="dialogDiv">
                            <label>当前节点：</label>
                            <span>{{houseStateData.currentNode}}</span>
                        </div>
                        <div class="dialogDiv">
                            <label>负责人：</label>
                            <span>{{houseStateData.nodeCharge}}</span>
                        </div>
                        <div class="dialogDiv">
                                <label>异常原因：</label>
                                <el-input
                                        type="textarea"
                                        :rows="3"
                                        placeholder="请输入异常原因"
                                        v-model="textarea" class="textA">
                                </el-input>
                        </div>
                        <el-button type="primary" @click="unusual">置为异常</el-button>
                </el-dialog>
        </div>
</template>

<script>
export default {
        data(){
                return {
                        params:{
                                orderName:"",
                                orderNum:"",
                                ownerName:"",
                                houseNum:"",
                                houseState:"",
                                pageNum:1,
                                pageSize:10
                        },
                        houseStates:[
                                {value:0,label:"全部"},
                                {value:1,label:"待跟进"},
                                {value:2,label:"跟进中"},
                                {value:3,label:"异常"},
                                {value:4,label:"已完成"}
                        ],
                        tableLoading:false,
                        tableData:[
                                {houseNum:"D3-8-12A",ownedDeveloper:"中弘地产中弘地产中弘地产中弘地产",propertyCompany:"58快过户",houseState:"1",currentNode:"网上预约",nodeCharge:"莉莉",progress:"25%"}
                        ],
                        dialogTableVisible:false,
                        houseStateData:[],
                        textarea:"",
                        total:0
                }
        },
        methods:{
                warn(msg) {
                        this.$alert(msg, '提示', {
                                type: 'error',
                                confirmButtonText: '确定',
                        });
                },
                initState(row, column, cellValue, index){
                        if(cellValue==1){
                                return "待跟进"
                        }
                        if(cellValue==2){
                                return "跟进中"
                        }
                        if(cellValue==3){
                                return "异常"
                        }
                        if(cellValue==4){
                                return "已完成"
                        }
                },
                handleSizeChange(val) {
                        // this.params.pageSize = val;
                        // this.loadData();
                },
                handleCurrentChange(val) {
                        // this.params.pageNum = val;
                        // this.loadData();
                },
                abnormal(val){
                        this.houseStateData=val;
                        this.textarea="";
                        this.dialogTableVisible=true;
                },
                unusual(){
                        if(this.textarea==""){
                                this.warn("请输入异常原因")
                                return;
                        }
                        this.$confirm("请确认房源是否置为异常？","提示",{
                                confirmButtonText:"确定",
                                cancelButtonText:"取消",
                                type:"warning"
                        }).then(()=>{
                                this.dialogTableVisible=false;
                                this.textarea="";
                        }).catch(()=>{

                        })
                },
                look(){
                        this.$router.push({
	        		path:"./propertyfollowlook"
	        		// query:{
	        		// 	id:val.id
	        		// }
	        	})
                }
        }
}
</script>

<style lang="stylus">
        .propertyWrap{
                .el-table .cell{
                        white-space:nowrap;
                }
                .dialogDiv{
                        display: flex;
                        margin: 15px 0;
                        &>label{
                                width: 150px;
                                text-align: right;
                        }
                        .radios{
                                flex: 1;
                                text-align: left;
                        }
                        .textA{
                                flex: 1
                        }
                }
        }

</style>
